<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>报表设计器</title>
    <style type="text/css">
        /** 表单查询条件  **/
        .select-list ul {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .select-list li {
            list-style: none;
        }
        .select-list li p, .select-list li label:not(.radio-box){
            float: left;
            width: 65px;
            margin: 5px 0px 0px 0px;
            text-align:right;
        }

        .select-list li input {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
            padding-left: 5px;
        }

        .select-list li .submit-btn {
            border: 0px;
            border-radius: 4px;
            background: transparent;
            outline: none;
            width: 40px;
            height: 23px;
        }

        .select-list li select {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
        }
    </style>
    <!-- Le styles -->
    <link th:href="@{/layoutit/css/bootstrap-combined.min.css}" rel="stylesheet">
    <link th:href="@{/layoutit/css/layoutit.css}" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script th:src="@{/layoutit/js/html5shiv.js}"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" th:href="@{/layoutit/img/favicon.png}">

    <script type="text/javascript" th:src="@{/layoutit/js/jquery-2.0.0.min.js}"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" th:src="@{/layoutit/http://code.jquery.com/jquery-1.9.1.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" th:src="@{/layoutit/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/js/jquery-ui.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/js/jquery.ui.touch-punch.min.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/js/jquery.htmlClean.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/ckeditor/ckeditor.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/ckeditor/config.js}"></script>
    <script type="text/javascript" th:src="@{/layoutit/js/scripts.js}"></script>
    <script th:src="@{/ruoyi/js/ry-ui.js}"></script>
</head>

<body style="min-height: 660px; cursor: auto;" class="edit">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a class="brand" href="http://justjavac.com/tools/layoutit/"><img th:src="@{/layoutit/img/favicon.png}"> <span id="title" th:text="${baseChartConfig.na}">构建中,注意保存</span></a>
            <div class="nav-collapse collapse">
                <ul class="nav" id="menu-layoutit">
                    <li class="divider-vertical"></li>
                    <li>
                        <div class="btn-group" data-toggle="buttons-radio">
                            <button type="button" id="edit" class="btn btn-primary active"><i class="icon-edit icon-white"></i>编辑</button>
                            <button type="button" class="btn btn-primary" id="sourcepreview"><i class="icon-eye-open icon-white"></i>预览</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-target="#downloadModal" role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button>
                            <button class="btn btn-primary" role="button" data-toggle="modal" data-target="#shareModal"><i class="icon-share icon-white"></i>发布</button>
                            <button class="btn btn-primary" href="#clear" id="clear"><i class="icon-trash icon-white"></i>清空</button>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary" href="#undo" id="undo" ><i class="icon-arrow-left icon-white"></i>撤销</button>
                            <button class="btn btn-primary" href="#redo" id="redo" ><i class="icon-arrow-right icon-white"></i>重做</button>
                        </div>
                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <div class="btn-group">
                        </div>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="">
            <div class="sidebar-nav">
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                            <div class="popover fade right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">功能</h3>
                                <div class="popover-content">在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/scaffolding.html#gridSystem">Bootstrap栅格系统.</a></div>
                            </div>
                        </div>
                        <i class="icon-plus icon-white"></i> 布局设置 </li>
                    <li style="display: list-item;" class="rows" id="estRows">
                        <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">
                                <input value="12" type="text">
                            </div>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column"></div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">
                                <input value="6 6" type="text">
                            </div>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span6 column"></div>
                                    <div class="span6 column"></div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">
                                <input value="8 4" type="text">
                            </div>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span8 column"></div>
                                    <div class="span4 column"></div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">
                                <input value="4 4 4" type="text">
                            </div>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span4 column"></div>
                                    <div class="span4 column"></div>
                                    <div class="span4 column"></div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">
                                <input value="2 6 4" type="text">
                            </div>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span2 column"></div>
                                    <div class="span6 column"></div>
                                    <div class="span4 column"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
                        <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                            <div class="popover fade right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">帮助</h3>
                                <div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/base-css.html">基本CSS.</a></div>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;" class="boxes" id="elmBase">
                        <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="text-left">靠左</a></li>
                <li class=""><a href="#" rel="text-center">居中</a></li>
                <li class=""><a href="#" rel="text-right">靠右</a></li>
              </ul>
              </span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="muted">禁用</a></li>
                <li class=""><a href="#" rel="text-warning">警告</a></li>
                <li class=""><a href="#" rel="text-error">错误</a></li>
                <li class=""><a href="#" rel="text-info">提示</a></li>
                <li class=""><a href="#" rel="text-success">成功</a></li>
              </ul>
              </span> </span>
                            <div class="preview">标题栏</div>
                            <div class="view">
                                <h3 contenteditable="true">h3. 这是一套可视化布局系统.</h3>
                            </div>
                        </div>

                        <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> </span>
                            <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                            <div class="preview">查询表单</div>
                            <div class="view">
                                <form id="formId" class="form-inline">
                                    <label>开始：</label>
                                    <input type="text" class="form-control input-small dateBegin" placeholder="yyyy-MM-dd">
                                    <label>结束：</label>
                                    <input type="text" class="form-control input-small dateEnd" placeholder="yyyy-MM-dd">
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                </form>
                            </div>
                        </div>

                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header"><i class="icon-plus icon-white"></i> 图表设计
                        <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                            <div class="popover fade right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">帮助</h3>
                                <div class="popover-content">拖放组件到布局框内. 拖入后你可以设置组件样式. 查看这里获取更多帮助 <a target="_blank" href="http://twitter.github.io/bootstrap/components.html">Components.</a></div>
                            </div>
                        </div>
                    </li>

                    <li  class="boxes mute" id="elmComm">
                        <div class="box box-element ui-draggable" style="">
                            <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                            <span class="drag label"><i class="icon-move"></i>拖动</span>
                            <div class="preview">表格</div>
                            <div class="view">
                                <a href="#close" name="hiddenButton" class="select-list label label-info" onclick="dmShapeStype(this,'table')"><i class="icon-search icon-white"></i>指标取数</a>
                                <a href="#close" name="hiddenButton" class="select-list label label-success" onclick="dwShapeStype(this)"><i class="icon-search icon-white"></i>数仓取数2</a>
                                <div name="viewContent" type="chart" style="margin-top: 15px">
                                    <div name="param"  style="display: none"></div>
                                    <div class="panel panel-default">
                                        <div class="panel-body"><div name="chart"></div></div>
                                    </div>
                                    <img alt="140x140" style="width: 350px;height: 250px" th:src="@{/layoutit/img/table.png}" class="removeClean">
                                </div>
                            </div>
                        </div>
                        <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" onclick="shapeStype(this)">样式定义</button></span>
                            <div class="preview">饼图</div>
                            <div class="view">
                                <a href="#close" name="hiddenButton" class="select-list label label-warning" onclick="dmShapeStype(this,'pie')"><i class="icon-search icon-white"></i>指标取数</a>
                                <a href="#close" name="hiddenButton" class="select-list label label-success" onclick="shapeStype(this)"><i class="icon-search icon-white"></i>数仓取数</a>
                                <div name="viewContent" type="chart" style="margin-top: 15px">
                                    <div name="param" style="display: none"></div>
                                    <div class="panel panel-default">
                                        <div class="panel-body"><div name="chart"></div></div>
                                    </div>

                                    <img alt="140x140" style="width: 350px;height: 250px" th:src="@{/layoutit/img/pie.jpg}" class="removeClean">
                                </div>
                            </div>
                        </div>
                        <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" onclick="shapeStype(this)">样式定义</button></span>
                            <div class="preview">柱图/折线</div>
                            <div class="view">
                                <div name="viewContent" type="chart" style="margin-top: 15px">
                                    <div name="param" ></div>
                                    <div class="panel panel-default">
                                        <div class="panel-body"><div name="chart"></div></div>
                                    </div>
                                    <img alt="140x140" style="width: 350px;height: 250px" th:src="@{/layoutit/img/line.png}" class="removeClean">
                                </div>
                            </div>
                        </div>
                        <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" onclick="shapeStype(this)">样式定义</button></span>
                            <div class="preview">柱图+折线图</div>
                            <div class="view">
                                <div name="viewContent" type="chart" style="margin-top: 15px">
                                    <div name="param" ></div>
                                    <div class="panel panel-default">
                                        <div class="panel-body"><div name="chart"></div></div>
                                    </div>
                                    <img alt="140x140" style="width: 350px;height: 250px" th:src="@{/layoutit/img/lineAndBar.png}" class="removeClean">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--/span-->
        <div class="demo ui-sortable" id="mainDesign" style="min-height: 304px; " th:text="${baseChartConfig.configOri}">
        </div>
        <!-- end demo -->
        <!--/span-->
        <div id="download-layout">
            <div class="container-fluid"></div>
        </div>
    </div>
    <!--/row-->
</div>
<!--/.fluid-container-->
<div class="modal hide fade" role="dialog" id="editorModal">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
        <h3>编辑</h3>
    </div>
    <div class="modal-body">
        <p>
            <textarea id="contenteditor"></textarea>
        </p>
    </div>
    <div class="modal-footer"> <a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<div class="modal hide fade" role="dialog" id="downloadModal">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
        <h3>下载</h3>
    </div>
    <div class="modal-body">
        <p>已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.</p>
        <div class="btn-group">
            <button type="button" id="fluidPage" class="active btn btn-info"><i class="icon-fullscreen icon-white"></i> 自适应宽度</button>
            <button type="button" class="btn btn-info" id="fixedPage"><i class="icon-screenshot icon-white"></i> 固定宽度</button>
        </div>
        <br>
        <br>
        <p>
            <textarea></textarea>
        </p>
    </div>
    <div class="modal-footer"> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<div class="modal hide fade" role="dialog" id="shareModal">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
        <h3>发布</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal m" id="form-base-add" th:object="${baseChartConfig}">
            <input type="hidden" name="idChartConfig" th:field="*{idChartConfig}" id="idChartConfig"/>
            <input type="text" name="config" id="config" style="display: none"/>
            <input type="text" name="configOri" id="configOri" style="display: none">
            <div class="control-group">
                <label class="col-sm-3 control-label">名称：</label>
                <div class="col-sm-8">
                    <input name="na" id="configNa" class="form-control" type="text" th:field="*{na}">
                </div>
            </div>
            <div class="control-group">
                <label class="col-sm-3 control-label">URL：</label>
                <div class="col-sm-8">
                    <input name="url" class="form-control" type="text" id="url" disabled th:field="*{url}">
                </div>
            </div>
            <div class="control-group">
                <label class="col-sm-3 control-label">日期类型：</label>
                <div class="col-sm-8">
                    <select name="euDttp" id="euDttp">
                        <option value="D" th:selected="*{euDttp=='D'}">天</option>
                        <option value="M" th:selected="*{euDttp=='M'}">月</option>
                        <option value="Q" th:selected="*{euDttp=='Q'}">季</option>
                        <option value="Y" th:selected="*{euDttp=='Y'}">年</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="col-sm-3 control-label">是否范围：</label>
                <div class="col-sm-8">
                    <select name="fgScope" id="fgScope">
                        <option value=0 th:selected="*{fgScope==0}">单日期</option>
                        <option value=1 th:selected="*{fgScope==1}">范围</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="col-sm-3 control-label">维度1：</label>
                <div class="col-sm-8">
                    <select name="idPubfld1">
                        <option></option>
                        <option value="ID_DIM_ORGAN" th:selected="*{idPubfld1=='ID_DIM_ORGAN'}">机构</option>
                        <option value="ID_DIM_DEPT_HIS" th:selected="*{idPubfld1=='ID_DIM_DEPT_HIS'}">HIS科室</option>
                        <option value="ID_DIM_DEPTNUR" th:selected="*{idPubfld1=='ID_DIM_DEPTNUR'}">HIS病区</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer"> <a class="btn" onclick="saveConfig()">保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<script>
    var dataElement;
    function dmShapeStype(ele,type){
        dataElement = $(ele).parent();
        $.modal.openFull('定义图表样式', "/base/etl/query/dm/self?type="+type,null,null,callback);
    }
    function dwShapeStype(ele,type){
        dataElement = $(ele).parent();
        $.modal.openTab("标准仓库详情",ctx+"base/etl/query/dw/toDetail?idDw="+id);
        // $.modal.openFull('定义图表样式', "/base/etl/query/dw/self?type="+type,null,null,callback);
    }
    function callback(index, layero) {
        debugger;
        var iframeWin = layero.find('iframe')[0];
        var style = iframeWin.contentWindow.submitHandler(index, layero);
        dataElement.find("div[name='param']").html(style);
        dataElement.parent().css("background-color","green");
    }

    function saveConfig() {
        var fields = $('#form-base-add').serializeArray();
        var obj = {}; //声明一个对象
        $.each(fields, function(index, field) {
            obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
        })
        $.ajax({
            url: '/base/chart/config/save',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(obj),
            success: function (result) {
                if(result.code==0) {
                    var data = result.data;
                    $("#idChartConfig").val(data.idChartConfig);
                    $("#title").val(data.na);
                    $("#shareModal").modal('hide');
                }
            }
        });
    };
    function unitPriview(ele) {
        debugger;
        var dateBegin = $(".dateBegin")[1].value;
        var dateEnd = $(".dateEnd")[1].value;
        if(dateBegin=="") {
            $.modal.alertError(dateBegin);return;
        }
        var param = $(ele).parent().find("div[name='param']").html();
        if(param=="") {
            $.modal.alertError(dateBegin);return;
        }

    }
    $(function () {
        var html = $("#mainDesign").text();
        if(html.startsWith(" 删除 拖动")) {
            html="";
        }
        $("#mainDesign").html(html);
    });
</script>
</body>
</html>
